<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>userlit列表</title>
    <meta name="author" content="小柒2012" />
    <meta name="site" content="https://blog.52itstyle.com" />
    <link rel="stylesheet" th:href="@{/iview/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
    <script th:src="@{/common.js}" type="text/javascript"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<!-- v-cloak 不需要表达式,用法：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

 -->
<div id="app" v-cloak>
    <div style="margin-bottom: 6px;margin: 30px">
        <div id="app-1">
            <p>{{ message }}</p>
            <!--<input v-model="message">-->

        </div>
        <div id="app-2">
            <span >{{mess3}}</span>
            <!-- v-bind指令：将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致，不是html文档喔，看页面代码有tilte,看html输出文档没有 -->
            <span v-bind:title="mess"></span>

            <br/>
            <!-- v-if 判断 -->
            <span v-if="messistrue">你看到我了</span>


            <br/>
            <!--循环 -->
            <div id="app-4">
                <ol>
                    <li v-for="user in userList">
                        {{user.id}}
                    </li>
                </ol>
            </div>

        <!--处理按钮
        为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例 -->
            <br/><br/>
            <div id="app-5">
                <p>{{ onmess }}</p>
                <button v-on:click="reverseMessage">逆转消息</button>
            </div>


            <!--v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定 -->
            <div id="app-6">
                <p>{{ modelmess }}</p>
                <input v-model="modelmess">
            </div>




        </div>
    </div>


    <!-- v-bind 指令将待办项传到循环输出的每个组件中 -->
    <!--双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-bind
     双大括号还是有样式的，还有，v-html中的属性data定义在Vue中-->

    <br/><br/>
    <p>Using mustaches:<span v-html="rawHtml" style="color:red">{{ rawHtml }}</span></p>
    <p>Using v-html directive: <span v-html="rawHtml" style="color:red"></span></p>
    <br/><br/>


    <!-- 特性
        Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
    <div v-bind:id="dynamicId"></div> -->
    <!--如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
    <button v-bind:disabled="isButtonDisabled">Button</button>

    使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。



这是语句，不是表达式
    {{ var a = 1 }}

    流控制也不会生效，请使用三元表达式
    {{ if (ok) { return message } }}



修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>
在接下来对 v-on 和 v-for 等功能的探索中，你会看到修饰符的其它例子。
    -->

</div>

<!-- v-bind 指令将待办项传到循环输出的每个组件中 -->
<div id="app-7">
    <ol>
        <!--
          现在我们为每个 todo-item 提供 todo 对象
          todo 对象是变量，即其内容可以是动态的。
          我们也需要为每个组件提供一个“key”，稍后再
          作详细解释。
        -->
        <todo-item
                v-for="item in items"
                v-bind:todo="item"
                v-bind:key="item.id">
        </todo-item>
    </ol>


    <div id="example">
        <p>Original message: "{{ message }}"</p>
        <!--reversedMessage是一个计算属性，不是直接赋值的，直接复制和计算属性赋值还是有区别的 -->
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <!-- 表达式中使用方式可以达到同样的效果-->
        <p>computed reverse message by function: {{funMess()}}</p>
    </div>
</div>






<script>
    var app = new Vue({
        el: '#app',
        data:{
            message:'hello world! vue,I like you',
            mess3:'mess3',
            mess:'hello,java world!',
            messistrue:true,
            userList:[
                {id:'10001'},
                {id:'10002'},
                {id:'10003'},
                {id:'10004'},
                {id:'10005'}
            ],
            onmess:'init value',
            modelmess:'请输入数据',
            rawHtml:'是红色吗'
        },
        methods:{
            reverseMessage:function () {
                this.onmess = this.onmess.split('').reverse().join('');
            }
        }
    });

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

    var app7 = new Vue({
        el: '#app-7',
        data: {
            items: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '随便其它什么人吃的东西' }
            ],
            message:'hello',

        },
        /**
         * computed和methods有区别吗？,用method没有效果，method好像是 v-on命令,入v-on:click='test()' @click='search()'
         * methods得在computed前面才能起作用。
         * */
        methods:{
            funMess:function () {
                return this.message.split('').reverse().join('')
            }
        },
       computed: {
            reversedMessage:function () {
                console.log('haha');
                return this.message.split('').reverse().join('')
            }
        },

    })

</script>

<script>
    //除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀
    var data= {a:1}
    // 该对象被加入到一个 Vue 实例中
    //只有当实例被创建时 data 中存在的属性才是响应式的
    var vm = new Vue({
        data:data
    })
    // 获得这个实例上的属性
    // 返回源数据中对应的字段
    vm.a == data.a;
    vm.a=2;
    console.log(data.a);
    data.a=3;
    console.log(vm.a);

</script>
<script>
    //比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
    data: {
        a: 1
    },
    created: function () {
        // `this` 指向 vm 实例
        /*也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。*/
        //new Vue() -> beforeCreate -> created ->beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestory -> destroyed
        console.log('a is: ' + this.a)
    }
})
    // => "a is: 1"
</script>



</body>
</html>